﻿<!DOCTYPE html>  <!--文档声明-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">  <!--英文的编码状态-->
<head>  <!--不可见内容-->
    <meta charset="UTF-8">  <!--编码格式-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!--适配手机浏览-->
    <title>三岁博客后台管理登录</title>   <!--标题-->
    <link rel="shortcut icon" href="../../static/images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <link rel="stylesheet" href="../../static/css/dist/semantic.min.css" th:href="@{/lib/semanticui/dist/semantic.min.css}"><!--引入css样式-->
    <link type="text/css" href="../../static/css/style.css" th:href="@{/css/style.css}"rel="stylesheet"/>
    <style>
        tips {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, .5);
            border-radius: .04rem;
            padding: .12rem .24rem;
            color: #fff
        }

        .message {
            /*display: none;*/
            width: 150px;
            height: 35px;
            margin-top: 100px;
            transform: translate(50%, 50%);
        }
    </style>
</head>

<body>
<div class="page">
    <div class="container">
        <div class="left">
            <div class="login">后台登录</div>
            <div class="eula">
                <span id="jinrishici-sentence">正在加载今日诗词....</span>
            </div>
            <!--            -->
            <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}"><i class="close icon"></i>用户名或密码错误</div>
        </div>
        <div class="right">
            <svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient
                            inkscape:collect="always"
                            id="linearGradient"
                            x1="13"
                            y1="193.49992"
                            x2="307"
                            y2="193.49992"
                            gradientUnits="userSpaceOnUse">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876"/>
                        <stop
                                style="stop-color:#ff0000;"
                                offset="1"
                                id="stop878"/>
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143"/>
            </svg>

            <form class="ui denglu" method="post" action="#" th:action="@{/admin/login}">
                <div class="form">
                    <label for="username">账号</label>
                    <input type="text" id="username" name="username"  autocomplete="off" >
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password">
                    <input type="submit" id="submit" class="btn-denglu" value="登录">
                </div>
            </form>
        </div>
    </div>
    <tips class="user-tishi"><h4>用户名不能为空</h4></tips>
    <tips class="pass-tishi"><h4>密码不能为空</h4></tips>
</div>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script src="../../static/lib/jquery/jquery.min.js" th:src="@{/lib/jquery/jquery.min.js}"></script>
<script src="../../static/js/anime.min.js" th:src="@{/js/anime.min.js}"></script>
<script>
    var current = null;
    document.querySelector('#username').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: 0,
                duration: 700,
                easing: 'easeOutQuart'
            },
            strokeDasharray: {
                value: '240 1386',
                duration: 700,
                easing: 'easeOutQuart'
            }
        });
    });
    document.querySelector('#password').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: -336,
                duration: 700,
                easing: 'easeOutQuart'
            },
            strokeDasharray: {
                value: '240 1386',
                duration: 700,
                easing: 'easeOutQuart'
            }
        });
    });
    document.querySelector('#submit').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: -730,
                duration: 700,
                easing: 'easeOutQuart'
            },
            strokeDasharray: {
                value: '530 1386',
                duration: 700,
                easing: 'easeOutQuart'
            }
        });
    });
</script>
<script>

    /*表单验证*/
    $(".btn-denglu").click(function () {
        var name = $("#username").val();
        var pass = $("#password").val();
        if (name == "" || name == "null") {
            $('.user-tishi').show(setTimeout(function () {
                $('.user-tishi').hide()
            }, 1500));         //输出不满足条件的提示内容
            return false;
        } else if (pass == "" || pass == "null") {
            $('.pass-tishi').show(setTimeout(function () {
                $('.pass-tishi').hide()
            }, 1500));         //输出不满足条件的提示内容
            return false;
        } else {
            return true;       //满足条件时将执行表单的action
        }
    })

</script>
</body>
</html>
